<template>
  <pro-layout
    v-model:collapsed="state.collapsed"
    v-model:selectedKeys="state.selectedKeys"
    v-model:openKeys="state.openKeys"
    :loading="loading"
    :menu-data="menuData"
    :breadcrumb="{ routes: breadcrumb }"
    disable-content-margin
    style="min-height: 100vh"
    v-bind="proConfig"
  >
    <template #menuHeaderRender>
      <router-link :to="{ path: '/' }">
        <img src="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg" />
        <h1 style="color:#262E47">中古商家管理系统</h1>
      </router-link>
    </template>
    <template #rightContentRender>
      <div style="margin-right: 12px">
        <HeaderRightContent />
      </div>
    </template>
    <!-- custom breadcrumb itemRender  -->
    <RouterView v-slot="{ Component, route }">
      <transition name="slide-left" mode="out-in">
        <component :is="Component" :key="route.path" />
      </transition>
    </RouterView>
  </pro-layout>
</template>

<script setup>
import { useRouter, RouterView, RouterLink } from "vue-router";
import { getMenuData, clearMenuItem } from "@ant-design-vue/pro-layout";
import { reactive, ref, computed, watch } from "vue";
import HeaderRightContent from "./header/HeaderRightContent.vue";
const router = useRouter();
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
const state = reactive({
  collapsed: false, // default collapsed
  openKeys: [], // defualt openKeys
  selectedKeys: [], // default selectedKeys
});
const loading = ref(false);
const proConfig = ref({
  layout: "mix",
  navTheme: "light",
  fixedHeader: true,
  fixSiderbar: true,
  splitMenus: false,
});
const breadcrumb = computed(() =>
  router.currentRoute.value.matched.concat().map((item) => {
    return {
      path: item.path,
      breadcrumbName: item.meta.title || "",
    };
  })
);

watch(
  router.currentRoute,
  () => {
    const matched = router.currentRoute.value.matched.concat();
    state.selectedKeys = matched
      .filter((r) => r.name !== "index")
      .map((r) => r.path);
    state.openKeys = matched
      .filter((r) => r.path !== router.currentRoute.value.path)
      .map((r) => r.path);
  },
  {
    immediate: true,
  }
);
</script>
